<template>
    <MyHead title="我的订单" @click-left="goback"></MyHead>

    <div>
        <div v-if="list.length > 0" class="order-list">
            <div class="order-item" v-for="(item, index) in list" :key="index"
                @click="gotoOnePage('/orderdetail/' + item.time)">
                <div class="address">
                    <van-contact-card type="edit" :name="item.name"
                        :tel="item.tel + ' (' + item.province + item.city + item.county + item.addressDetail + ')'"
                        :editable="false" />

                    <van-card :num="item.num" :price="item.originprice" :title="item.proname" :thumb="item.img1" />
                    <div class="time">
                        购买时间: {{ dateFormatInit(item.time * 1) }}
                    </div>

                </div>
            </div>
        </div>
        <div class="empty" v-else>
            <van-empty description="暂无订单数据" />
        </div>
    </div>
    <!-- </div> -->
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { getOrderListApi } from '../api/order'
import { useCommon } from '../hooks/useCommon'
const {goback, dateFormatInit, gotoOnePage } = useCommon()
const list = ref([])
const userid = localStorage.getItem('id')

onMounted(() => {
    getOrderListApi(userid).then(res => {
        console.log(res)
        list.value = res.data
        console.log(list.value)
    })
})
</script>


<style >
.order-list {
    padding: 15px;
}

.order-item {
    margin-top: 15px;
    background: #ddd;
    border-radius: 10px;
    padding: 10px;

}

.time {
    color: #666;
    margin: 10px 0;
    font-size: 14px;
}

.goods-card {
    border-radius: 10px;
}

.cred {
    color: #f50;
}
</style>